.drag-outer {
    border: 1px rgb(255, 0, 0) solid;
    width: 720px;
    height: 60px;
    // position: relative;
    position: absolute;
    outline: none;
    user-select: none;


    /* 八个方位的div控制 */
    .drag-direction {
        width: 5px;
        height: 5px;
        border: 1px black solid;
        background-color: gray;
        position: absolute;
        display: none;
    }

    &:focus .drag-direction {
        display: block;
    }

    /* 八个方位的小手各自的div */
    .direction-n {
        cursor: n-resize;
        left: 50%;
        transform: translateX(-50%);
        top: -5px;
    }

    .direction-ne {
        cursor: ne-resize;
        top: -5px;
        right: -5px;
    }

    .direction-e {
        cursor: e-resize;
        top: 50%;
        transform: translateY(-50%);
        right: -5px;
    }

    .direction-se {
        cursor: se-resize;
        bottom: -5px;
        right: -5px;
    }

    .direction-s {
        cursor: s-resize;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
    }

    .direction-sw {
        cursor: sw-resize;
        left: -5px;
        bottom: -5px;
    }

    .direction-w {
        cursor: w-resize;
        left: -5px;
        top: 50%;
        transform: translateY(-50%);
    }

    .direction-nw {
        cursor: nw-resize;
        left: -5px;
        top: -5px;
    }

    .drag-tip {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    &:hover .drag-tip {
        display: block;
    }
}